<template>
    <div class="link-card">
        <figure>
            <slot name="img"></slot>
        </figure>
        <div class="link-card-footer" :class="{ inline: inline }">
            <template v-if="!inline">
                <svg-icon name="link-icon-active" />
                <span>
                    <slot></slot>
                </span>
            </template>
            <template v-else>
                <svg-icon name="link-icon" />
                <div class="text-box">
                    <p>
                        <slot name="text"></slot>
                    </p>
                    <span>
                        <slot></slot>
                    </span>
                </div>
            </template>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        inline: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {}
    },
    methods: {}
}
</script>
<style scoped lang="scss">
.link-card {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #E6E6E6;

    .link-card-footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #FAFAFA;
        border-top: 1px solid #E6E6E6;
        padding: 20px;

        svg {
            width: 20px;
            height: 20px;
            margin-right: 12px;
        }



        span,
        a {
            word-break: break-all;

            font-family: Roboto-Regular,
                Roboto;
            font-weight: 400;
            font-size: 16px;
            color: #087196;
            line-height: 20px;
            text-decoration-line: underline;
            cursor: pointer;

            &:hover {
                text-decoration-line: none;
            }
        }




        &.inline {
            border-top: none;
            background: #ffffff;
            cursor: pointer;

            &:hover {
                background: #F6F6F6;

                .text-box {
                    span {
                        text-decoration-line: none;
                    }
                }
            }

            svg {
                width: 32px;
                height: 32px;
                margin-right: 20px;
            }

            .text-box {
                flex: 1;
                &>p {
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    font-size: 16px;
                    color: #292929;
                    line-height: 20px;
                    text-decoration-line: none;
                }

                &>span {
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    font-size: 14px;
                    color: #087196;
                    line-height: 20px;
                    text-decoration-line: underline;
                }
            }
        }

    }
}
</style>